Chart for WPF/Silverlight
重要なヒント
製品の概要 > はじめに > 重要なヒント

C1Chart コントロールを使用するときは、以下に示す Chart for WPF/Silverlight の重要なヒントを参考にしてください。

ヒント１：BeginUpdate()/EndUpdate メソッドを使用してパフォーマンスを向上させる

チャートのプロパティまたはデータ値を大量に更新する場合は、BeginUpdate()/EndUpdate() ブロック内に更新コードを配置します。

これにより、再描画がEndUpdate() メソッドの呼び出し終了後に１回実行されるだけになるので、パフォーマンスが向上します。

次に例を示します。

コードのコピー 
' 更新を開始します
  C1Chart1.BeginUpdate()
  Dim nser As Integer = 10, npts As Integer = 100
  For iser As Integer = 1 To nser
    ' データ配列を作成します
    Dim x(npts - 1) As Double, y(npts - 1) As Double
    For ipt As Integer = 0 To npts - 1
      x(ipt) = ipt
      y(ipt) = (1 + 0.05 * iser) * Math.Sin(0.1 * ipt + 0.1 * iser)
    Next
    ' データ系列を作成し、チャートに追加します
    Dim ds = New XYDataSeries()
    ds.XValuesSource = x
    ds.ValuesSource = y
    C1Chart1.Data.Children.Add(ds)
  Next
  ' チャートタイプを設定します
  C1Chart1.ChartType = ChartType.Line
  ' 更新を終了します
  C1Chart1.EndUpdate()
コードのコピー 
// 更新を開始します
  c1Chart1.BeginUpdate();
  int nser = 10, npts = 100;
  for (int iser = 0; iser < nser; iser++)
  {
    // データ配列を作成します
    double[] x = new double[npts], y = new double[npts];
    for (int ipt = 0; ipt < npts; ipt++)
    {
      x[ipt] = ipt;
      y[ipt] = (1 + 0.05 * iser) * Math.Sin(0.1 * ipt + 0.1 * iser);
    }
    // データ系列を作成し、チャートに追加します
    XYDataSeries ds = new XYDataSeries();
    ds.XValuesSource = x; ds.ValuesSource = y;
    c1Chart1.Data.Children.Add(ds);
  }
  // チャートタイプを設定します
  c1Chart1.ChartType = ChartType.Line;
  // 更新を終了します
  c1Chart1.EndUpdate();

ヒント２：大きなデータ配列には、チャートタイプとして折れ線グラフまたはエリアグラフを使用する

大量のデータ値がある場合は、折れ線グラフとエリアグラフが最も高いパフォーマンスを提供します。

パフォーマンスをさらに向上するには、LineAreaOptions.OptimizationRadiusという添付プロパティを設定して、大量のデータに対する組み込み最適化機能を有効にします。次に例を示します。

コードのコピー 
LineAreaOptions.SetOptimizationRadius(C1Chart1, 1.0)
コードのコピー 
LineAreaOptions.SetOptimizationRadius(c1Chart1, 1.0);

半径には、1.0 〜 2.0 の小さな値を使用することをお勧めします。これより大きな値を指定すると、プロットの精度に影響することがあります。

ヒント３：DataSeries.PlotElementLoaded イベントを使用してプロット要素の外観と動作を更新する

横棒、縦棒、円などのプロット要素が読み込まれると、PlotElementLoaded イベントが発生します。このイベントが発生すると、プロット要素のプロパティおよび対応するデータポイントにアクセスできます。 次のコードでは、点の y 値に基づいてその色を設定します。次に例を示します。

コードのコピー 
' データ配列を作成します
  Dim npts As Integer = 100
  Dim x(npts - 1) As Double, y(npts - 1) As Double
  For ipt As Integer = 0 To npts - 1
    x(ipt) = ipt
    y(ipt) = Math.Sin(0.1 * ipt)
  Next
  ' データ系列を作成します
  Dim ds = New XYDataSeries()
  ds.XValuesSource = x
  ds.ValuesSource = y
  ' イベントハンドラを設定します
  AddHandler ds.PlotElementLoaded, AddressOf PlotElement_Loaded
  ' データ系列をチャートに追加します
  C1Chart1.Data.Children.Add(ds)
  ' チャートタイプを設定します
  C1Chart1.ChartType = ChartType.LineSymbols
...
  ' イベントハンドラ
  Sub PlotElement_Loaded(ByVal sender As Object, ByVal args As EventArgs)
    Dim pe = CType(sender, PlotElement)
    If Not TypeOf pe Is Lines Then
      Dim dp As DataPoint = pe.DataPoint
      ' 正規化された y 値（０〜１）
      Dim nval As Double = 0.5 * (dp.Value + 1)
      ' 青（-1）から赤（+1）で塗りつぶします
      pe.Fill = New SolidColorBrush(Color.FromRgb(CByte(255 * nval), _
       0, CByte(255 * (1 - nval))))
    End If
  End Sub
コードのコピー 
// データ配列を作成します
  int npts = 100;
  double[] x = new double[npts], y = new double[npts];
  for (int ipt = 0; ipt < npts; ipt++)
  {
   x[ipt] = ipt;
    y[ipt] = Math.Sin(0.1 * ipt);
  }
  // データ系列を作成します
  XYDataSeries ds = new XYDataSeries();
  ds.XValuesSource = x; ds.ValuesSource = y;
  // イベントハンドラを設定します
  ds.PlotElementLoaded += (s, e) =>
    {
      PlotElement pe = (PlotElement)s;
      if (!(pe is Lines)) // 線をスキップします
      {
        DataPoint dp = pe.DataPoint;
               // 正規化された y 値（０〜１）
      double nval = 0.5*(dp.Value + 1);
        // 青（-1）から赤（+1）で塗りつぶします
        pe.Fill = new SolidColorBrush(
          Color.FromRgb((byte)(255 * nval), 0, (byte)(255 * (1-nval))));
      }
    };
  // データ系列をチャートに追加します
  c1Chart1.Data.Children.Add(ds);
  // チャートタイプを設定します
  c1Chart1.ChartType = ChartType.LineSymbols;

ヒント 4：データポイントのラベルとツールチップ

データポイントのラベルまたはツールチップを作成するには、PointLabelTemplate プロパティまたは PointTooltipTemplate プロパティにデータテンプレートを設定する必要があります。

次のサンプルコードは、各データポイントのインデックスを表示する方法を示します。

XAML
コードのコピー 
<c1chart:C1Chart Name="c1Chart1" ChartType="XYPlot">
  <c1chart:C1Chart.Data>
    <c1chart:ChartData>
      <!-- source collection -->
      <c1chart:ChartData.ItemsSource>
        <PointCollection>
          <Point X="1" Y="1" />
          <Point X="2" Y="2" />
          <Point X="3" Y="3" />
          <Point X="4" Y="2" />
          <Point X="5" Y="1" />
        </PointCollection>
      </c1chart:ChartData.ItemsSource>
      <c1chart:XYDataSeries SymbolSize="16,16"
        XValueBinding="{Binding X}" ValueBinding="{Binding Y}">
        <c1chart:XYDataSeries.PointLabelTemplate>
          <DataTemplate>
            <!-- display point index at the center of point symbol  -->
            <TextBlock c1chart:PlotElement.LabelAlignment="MiddleCenter"
                 Text="{Binding PointIndex}" />
          </DataTemplate>
        </c1chart:XYDataSeries.PointLabelTemplate>
      </c1chart:XYDataSeries>
    </c1chart:ChartData>
  </c1chart:C1Chart.Data>
</c1chart:C1Chart>

テンプレートから作成される要素のデータコンテキストは、対応するデータポイントに関する情報を含む DataPoint クラスのインスタンスに設定されます。

ヒント５：チャートを画像として保存する

次のメソッドは、チャート画像を png ファイルとして保存します。

コードのコピー 
Sub Using stm = System.IO.File.Create(fileName)
    c1Chart1.SaveImage(stm, ImageFormat.Png)
End Using
コードのコピー 
using (var stm = System.IO.File.Create(fileName))
   {
    c1Chart1.SaveImage(stm, ImageFormat.Png);
   }

ヒント６：チャートの印刷

次のコードは、デフォルト設定を使用して、指定されたチャートをデフォルトのプリンタに印刷します。次に例を示します。

コードのコピー 
Dim pd = New PrintDialog()
  pd.PrintVisual(C1Chart1, "chart")

コードのコピー 
new PrintDialog().PrintVisual(c1Chart1, "chart");
Visual Basic
コードのコピー 
Imports System.Windows.Printing
Dim doc As New PrintDocument
AddHandler doc.PrintPage, _
Sub(s, ea)
    ea.PageVisual = C1Chart1
End Sub
doc.Print("チャート印刷")

C#
コードのコピー 
using System.Windows.Printing;
PrintDocument doc = new PrintDocument();
doc.PrintPage += (s, ea) =>
{
    ea.PageVisual = c1Chart1;
};
doc.Print("チャート印刷");

ヒント７：デカルト座標の複数のチャートタイプを混在させる

ChartType プロパティを使用すると、同じデカルト座標プロットに異なるチャートタイプを簡単に混在させることができます。

次のコードは、３つのデータ系列を作成する方法を示します。１つ目は面、２つ目は階段、３つ目はデフォルトチャートタイプ（折れ線）を含む系列です。

コードのコピー 
Dim nser As Integer = 3, npts As Integer = 25
  For iser As Integer = 1 To nser
    ' データ配列を作成します
    Dim x(npts - 1) As Double, y(npts - 1) As Double
    For ipt As Integer = 0 To npts - 1
      x(ipt) = ipt
      y(ipt) = (1 + 0.05 * iser) * Math.Sin(0.1 * ipt + 0.1 * iser)
    Next
    ' データ系列を作成し、チャートに追加します
    Dim ds = New XYDataSeries()
    ds.XValuesSource = x
    ds.ValuesSource = y
    C1Chart1.Data.Children.Add(ds)
  Next
  ' デフォルトのチャートタイプ
  C1Chart1.ChartType = ChartType.Line
  ' １つ目の系列
  C1Chart1.Data.Children(0).ChartType = ChartType.Area
  ' ２つ目の系列
  C1Chart1.Data.Children(1).ChartType = ChartType.Step
コードのコピー 
int nser = 3, npts = 25;
  for (int iser = 0; iser < nser; iser++)
  {
    // データ配列を作成します
    double[] x = new double[npts], y = new double[npts];
    for (int ipt = 0; ipt < npts; ipt++)
    {
      x[ipt] = ipt;
      y[ipt] = (1 + 0.05 * iser) * Math.Sin(0.1 * ipt + 0.1 * iser);
    }
    // データ系列を作成し、チャートに追加します
    XYDataSeries ds = new XYDataSeries();
    ds.XValuesSource = x; ds.ValuesSource = y;
    c1Chart1.Data.Children.Add(ds);
  }
  //デフォルトのチャートタイプ
  c1Chart1.ChartType = ChartType.Line;
  // １つ目の系列
  c1Chart1.Data.Children[0].ChartType = ChartType.Area;
  // ２つ目の系列
  c1Chart1.Data.Children[1].ChartType = ChartType.Step;
関連トピック
XAML クイックリファレンス

 

 

Copyright © GrapeCity, Inc. All rights reserved.